<template>
	{{configStore.shareCode}}
	<up-overlay :show="show" opacity="0.2">
		<view class="share-panel">
			<!-- 	<up-loading-icon timing-function="linear" text-color="white"
				style="gap: 10rpx;flex-direction:column !important;" color="white" :text="loadText" mode="circle"
				v-if="loading">
			</up-loading-icon>
			<view class="share-box" v-else>
				<view class="share-header">
					<view class="title">
						邀请
					</view>
				</view>
				<view class="share-content">
					<view class="user-info" v-if="userInfo">
						<view class="avatar">
							<head-image :name="userInfo.nickName" :url="userInfo.headImage" :size="100"></head-image>
						</view>
						<view class="nick-name">
							{{userInfo.nickName}}
						</view>
						<view class="content">
							成为了您的邀请人
						</view>
						<view class="content">
							邀请码：{{shareCode}}
						</view>
					</view>
				</view>
				<view class="btn">
					<up-button @tap="finish" shape="circle" type="primary" icon="close"></up-button>
				</view>
			</view> -->
			<view class="pop-invite">
				<view class="pop-layout">
					<image class="bg" src="https://file.dgyxy.com/resource/icon/Bg_invite.png"></image>
					<view class="content" v-if="userInfo">
						<image class="avatar" :src="userInfo.headImage"></image>
						<view class="name">#{{userInfo.nickName}}#</view>
						<view class="invitation-message">成为了您的邀请人</view>
						<view class="invitation-code-label md">邀请码:</view>
						<view class="invitation-code">{{configStore.shareCode}}</view>
					</view>
				</view>
				<!-- 关闭 -->
				<svg-icon @tap="finish" shape="circle" class="icon-container" icon="clean" :width="32"></svg-icon>
			</view>
		</view>
	</up-overlay>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch
	} from 'vue';
	import {
		isNullOrEmpty
	} from '@/utils';
	import useUserStore from '@/store/userStore.js'
	import useConfigStore from '@/store/configStore.js'
	import request from '@/common/request';
	const show = ref(false)
	const loading = ref(false)
	const bindSuccess = ref(false)
	const loadText = ref("请稍等")
	const userInfo = ref(null)

	const configStore = useConfigStore()

	watch(() => configStore.shareCode, () => {
		eventShare()
	})

	onMounted(() => {
		eventShare()
	})

	const eventShare = () => {
		console.log(configStore.shareCode);
		if (isNullOrEmpty(configStore.shareCode)) {
			show.value = false
			loading.value = false
			configStore.closeSharePanel()
			return
		}
		const userStore = useUserStore()
		const user = userStore.userInfo
		if (user.isTmp) {
			uni.showToast({
				icon: 'none',
				title: "要绑定邀请人，请先完善账号信息"
			})
			configStore.closeSharePanel()
		} else {
			// 开始绑定
			show.value = true
			loading.value = true
			bindShare()
		}
	}

	const finish = () => {
		configStore.closeSharePanel()
		show.value = false
		loading.value = false
	}

	const bindShare = () => {
		request({
			url: "/share/save",
			method: "POST",
			data: {
				shareCode: configStore.shareCode,
			}
		}).then(res => {
			loading.value = false
			bindSuccess.value = true
			request({
				url: "/share/sharerInfo?shareCode=" + configStore.shareCode,
				method: "GET"
			}).then(res => {
				userInfo.value = res
				loading.value = false
			})
		}).catch(res => {
			loading.value = false
			bindSuccess.value = false
			uni.showToast({
				icon: 'none',
				title: res.message,
				duration: 2000
			})
			configStore.closeSharePanel()
		})
	}
</script>

<style lang="scss" scoped>
	.share-panel {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.pop-invite {
			width: 303px;
			height: 360px;

			.pop-layout {
				width: 303px;
				height: 290px;
				position: relative;

				.bg {
					width: 303px;
					height: 270px;
					position: absolute;
					bottom: 0;
				}

				.content {
					position: absolute;
					/* 将内容部分定位为绝对位置 */
					z-index: 999;
					margin-left: 22px;

					.avatar {
						width: 72px;
						height: 72px;
						border-radius: 35px;
					}

					.name {
						font-size: 24px;
						margin-top: 24px;
						color: #2970FF;
					}

					.invitation-message {
						font-size: 24px;
					}

					.invitation-code-label {
						margin-top: 48px;
						font-size: 16px;
					}

					.invitation-code {
						margin-top: 8px;
						font-size: 32px;
						background: linear-gradient(180deg, #9193FF, #7B38F0);
						/* 渐变色 */
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}

			.icon-container {
				margin-top: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1000;
			}
		}

		.share-box {
			width: 80%;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			border-radius: 30rpx;

			.share-content {
				background-color: white;
				padding: 30rpx;
				border-radius: 30rpx;
				border-top-left-radius: 0;
				border-top-right-radius: 0;
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;

				.u-button {
					width: 20%;
					margin-top: 30rpx;
				}
			}

			.share-header {
				background-color: #3b82f6;
				color: white;
				border-radius: 30rpx;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					flex: 1;
					text-align: center;
				}
			}
		}
	}
</style>